@import '../variables';
.ant-spin-nested-loading {
    height:100%;
    .ant-spin-container {
        height:100%;
    }
}
.cubes {
    padding:20px 10px;
    .ant-btn-primary {
        background-color: #48535b;
        border-color:#48535b;
    }
}
.sync-data-btn {
    width:220px;
    margin-left:10px;
    margin-top: 100px;
    background:#48535b;
    color:#fff;
    border-radius: 3px;
    height: 32px;
    line-height: 32px;
    padding-left:10px;
    font-size: 14px;
    cursor: pointer;
    .anticon {
        float:right;
        margin:8px 5px 0 0;
    }
}
.data-area {
    height:100%;
    .table-area {
        height: 50%;
        position: relative;
        .toolbar {
            height:65px;
            background:#f0f3f6;
            padding-left:20px;
            position: relative;
            .ctrl-btn {
                .item {
                    float:left;
                    width:50px;
                    height:46px;
                    text-align: center;
                    margin-right:10px;
                    position: relative;  
                    padding-top:24px;
                    border-radius: 3px;  
                    margin-top:9px; 
                    cursor: pointer;   
                    .iconfont {
                        font-size:20px;
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform: translate(-50%,-50%);
                        line-height: 46px;
                    }
                    .name {
                        font-size:12px;
                        line-height: 22px;
                        display: none;
                    }
                }
                .wide {
                    width:66px;
                }
                .item:hover,.active {
                    background:#fff;
                    border:1px solid #fff;
                    .iconfont {
                        top:20%;
                        left:50%;
                        transform: translate(-50%,-30%);
                    }
                    .name {
                        display: block;
                    }
                }
                .item.disabled {
                    cursor: not-allowed;
                }
            }
            .bar-cover {
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
            }
        }
        .cubeInfo {
            padding:0 20px;
            dt {
                font-weight: bold;
                line-height: 40px;
                padding-bottom: 20px;
            }
            .label {
                float:left;
                width:130px;
            }            
        }
        .iconfont.icon-info {
            color:rgba($color: $primary-color, $alpha: 0.5);
            cursor: pointer;
        }
        .iconfont.icon-info:hover {
            color:$primary-color;
        }
        .table {
            position: relative;
            .fixedName {
                position: absolute;
                top:0;
                z-index: 999;
                line-height: 32px;
                font-weight: bold;
            }
        }
        .no-data-cause {
            position: absolute;
            top:10px;
            width:100%;
        }
    }
    .chart-area {
        height:50%;
        .toolbar {
            height:65px;
            background:#f0f3f6;
            padding-left:20px;
            position: relative;
            .ctrl-btn {
                .item {
                    float:left;
                    width:50px;
                    height:46px;
                    text-align: center;
                    margin-right:5px;
                    position: relative;  
                    padding-top:24px;
                    border-radius: 3px;  
                    margin-top:9px; 
                    cursor: pointer;   
                    .iconfont {
                        font-size:20px;
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform: translate(-50%,-50%);
                        line-height: 46px;
                    }
                    .name {
                        font-size:12px;
                        line-height: 22px;
                        display: none;
                    }
                }
                .wide {
                    width:66px;
                }
                .item:hover,.active {
                    background:#fff;
                    border:1px solid #fff;
                    .iconfont {
                        top:20%;
                        left:50%;
                        transform: translate(-50%,-30%);
                    }
                    .name {
                        display: block;
                    }
                }
                .item.disabled {
                    cursor: not-allowed;
                }
            }
            .size-btn {
                background:$primary-color;
                color:#fff;
                position: absolute;
                top:0;
                right:0;
                padding:5px 10px;
                border-bottom-left-radius: 8px;
                .iconfont {
                    margin:0 3px;
                    cursor: pointer;
                }
            }
            .bar-cover {
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
            }
        }
        .chart {
            height:calc(100% - 65px);
            overflow: hidden;
        }
    }
}


.data-table {    
    .handsontable table.htCore {
        border-collapse:collapse;border-spacing:1;
    }
    .handsontable th, .handsontable td,.handsontable .htDimmed {
        vertical-align:middle;
    }
    .ht_clone_top_left_corner thead tr th:nth-last-child(2) {
        border-right:none;
    }
    .handsontable th {
        background-color: #fff;
        color: #fff;
    }
    .handsontable tbody th.ht__active_highlight, .handsontable thead th.ht__active_highlight {
        color:#fff;
    }
    .handsontable th:first-child, .handsontable td:first-of-type, .handsontable thead tr th:nth-child(2), .handsontable .htNoFrame + th, .handsontable .htNoFrame + td {
        border:none;
    }
    .handsontable tr:first-child th, .handsontable tr:first-child td {
        border:none;
    }
    .handsontable th, .handsontable td {
        border:none;
        line-height:28px;
        padding:0 10px;
        height:28px;
    }
    .handsontable tr:nth-child(odd) td {
        background:#f0f3f6;
    }
    .handsontable tr:nth-child(even) {
        background:#fff;
    }
    .handsontable .htDimmed {
        background:none;
        color:#282828;
    }
    .handsontable tr:first-child td {
        border-top:1px solid #fff;
        border-bottom:1px solid #134f7a;
        background:#fff;
        /*border-right:1px solid #fff;*/
        white-space: nowrap;
    }

    .handsontable thead tr:first-child th, .handsontable thead tr:first-child td {
        background:#fff;
        border-top:none;
    }
    .handsontable.ht_clone_left .wtHider .wtSpreader .htCore tr:nth-child(odd) td {
        background:#f0f3f6;
    }


    .handsontable .icon-constyle {
        background-image:url(~@/assets/datas-icon.png);
        display:inline-block;
        position:relative;
        margin-right:2px;
    }
    .handsontable .icon-e1 {
        width:15px;
        height:14px;
        background-position:-30px 0;
        top:3px;
    }
    .handsontable .icon-e2 {
        width:15px;
        height:14px;
        background-position:-46px 0;
        top:3px;
    }
    .handsontable .icon-e3 {
        width:15px;
        height:14px;
        background-position:-62px 0;
        top:3px;
    }
    .handsontable .icon-e4 {
        width:15px;
        height:14px;
        background-position:-78px 0;
        top:3px;
    }
    .handsontable .icon-e5 {
        width:15px;
        height:14px;
        background-position:-94px 0;
        top:3px;
    }

    .handsontable .icon-f1 {
        width:15px;
        height:14px;
        background-position:-30px -15px;
        top:3px;
    }
    .handsontable .icon-f2 {
        width:15px;
        height:14px;
        background-position:-46px -15px;
        top:3px;
    }
    .handsontable .icon-f3 {
        width:15px;
        height:14px;
        background-position:-62px -15px;
        top:3px;
    }
    .handsontable .icon-f4 {
        width:15px;
        height:14px;
        background-position:-78px -15px;
        top:3px;
    }
    .handsontable .icon-f5 {
        width:15px;
        height:14px;
        background-position:-94px -15px;
        top:3px;
    }
    .handsontable .icon-j1 {
        width:14px;
        height:14px;
        background-position:-30px -31px;
        top:3px;
    }
    .handsontable .icon-j2 {
        width:14px;
        height:14px;
        background-position:-46px -31px;
        top:3px;
    }
    .handsontable .icon-j3 {
        width:14px;
        height:14px;
        background-position:-62px -31px;
        top:3px;
    }
    .handsontable .icon-j4 {
        width:14px;
        height:14px;
        background-position:-78px -31px;
        top:3px;
    }
    .handsontable .icon-j5 {
        width:14px;
        height:14px;
        background-position:-94px -31px;
        top:3px;
    }
    .handsontable .icon-l1 {
        width:12px;
        height:14px;
        background-position:-30px -47px;
        top:3px;
    }
    .handsontable .icon-l2 {
        width:12px;
        height:14px;
        background-position:-46px -47px;
        top:3px;
    }
    .handsontable .icon-l3 {
        width:12px;
        height:14px;
        background-position:-62px -47px;
        top:3px;
    }
    .handsontable .icon-l4 {
        width:12px;
        height:14px;
        background-position:-78px -47px;
        top:3px;
    }
    .handsontable .icon-l5 {
        width:12px;
        height:14px;
        background-position:-94px -47px;
        top:3px;
    }
    .handsontable .icon-sort,.handsontable .icon-sort-lt {
        display: block;
        margin:0 auto 2px auto;
        width:0;
        height:0;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        border-top:5px solid #222;    
        border-bottom:none;
        cursor: pointer;
    }
    .handsontable .icon-sort-gt {
        display: block;
        margin:0 auto 2px auto;
        width:0;
        height:0;
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        border-top:none;
        border-bottom:5px solid #222;
        cursor: pointer;
    }
    .handsontable .icon-sort-lt.current {
        border-top-color: $primary-color;
    }
    .handsontable .icon-sort-gt.current {
        border-bottom-color: $primary-color;
    }
}



.big-chart {
    width:calc(100% - 270px);
    height:100%;
    background:#fff;
    position: absolute;
    top:0;
    right:0;
    z-index: 999;
    padding:15px;

    .toolbar {
        height:65px;
        background:#f0f3f6;
        padding-left:20px;
        position: relative;
        .ctrl-btn {
            .item {
                float:left;
                width:50px;
                height:46px;
                text-align: center;
                margin-right:10px;
                position: relative;  
                padding-top:24px;
                border-radius: 3px;  
                margin-top:9px; 
                cursor: pointer;   
                .iconfont {
                    font-size:20px;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                    line-height: 46px;
                }
                .name {
                    font-size:12px;
                    line-height: 22px;
                    display: none;
                }
            }
            .wide {
                width:66px;
            }
            .item:hover,.active {
                background:#fff;
                border:1px solid #fff;
                .iconfont {
                    top:20%;
                    left:50%;
                    transform: translate(-50%,-30%);
                }
                .name {
                    display: block;
                }
            }
            .item.disabled {
                cursor: not-allowed;
            }
        }
        .size-btn {
            background:$primary-color;
            color:#fff;
            position: absolute;
            top:0;
            right:0;
            padding:5px 10px;
            border-bottom-left-radius: 8px;
            .iconfont {
                margin:0 3px;
                cursor: pointer;
            }
        }
        .bar-cover {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
    }
    .chart-dims {
        height:44px;
        padding-top:6px;
    }
    .chart {
        height:calc(100% - 110px);
    }
    .switch {
        position: absolute;
        bottom:36px;
        left:30px;
        font-size: 24px;
        .anticon {
            cursor:pointer;
        }
    }
}